<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /*
    CSS的某些属性具有继承性(Inherited):

    口 如果一个属性具备继承憾,那么在该元素上设置后,它的后代元素都可以继承这个属性
    
    口 当然，如果后代元素自己有设置该属性, 那么优先使用后代元素自己的属性(不管继承过来的属性权重多
    
    如何知道一个属性是否具有继承性呢?
    口常见的font-size/font-family/font-weight/line-height/color/text-align都具有继承性口 这些不用刻意去记，用的多自然就记住了
    */
    /* h1,p,span{
        color: red;
    } */
    div.box{
        color: gold;
    }
    .box2{
        /* 32px */
        font-size: 2em; 
    }
    p{
        /* 64px */
        font-size: 2em;

    }
    .box3{
        color: blue;
        border: 2px solid purple;
    }
    .box3 p{
        /* 很少用   继承父级的border属性样式 */
        border: inherit;
    }
</style>
<body>
    <div class="box">
        <h1>hhhhh</h1>
        <p>pppppp</p>
        <span>ssssss</span>
    </div>
    <!-- 继承计算值 -->
    <div class="box2">
        box本身的内容
        <p>pppppp</p>
    </div>
    <!-- 强制继承 -->
    <div class="box3">
        <h1>h11h1h1h11h</h1>
        <p>pppppp</p>
    </div>
</body>
</html>